<template>
  <div class="search-result-skeleton">
    <div class="skeleton-group" v-for="i in groupCount" :key="`group-${i}`">
      <div class="skeleton-header">
        <div class="skeleton-title"></div>
        <div class="skeleton-count"></div>
      </div>
      
      <div class="skeleton-items">
        <div class="skeleton-item" v-for="j in itemCount" :key="`item-${i}-${j}`">
          <div class="skeleton-icon"></div>
          <div class="skeleton-content">
            <div class="skeleton-item-title"></div>
            <div class="skeleton-item-desc"></div>
            <div class="skeleton-item-meta">
              <div class="skeleton-tag"></div>
              <div class="skeleton-path"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchResultSkeleton',
  props: {
    groupCount: {
      type: Number,
      default: 2
    },
    itemCount: {
      type: Number,
      default: 3
    }
  }
}
</script>

<style scoped>
.search-result-skeleton {
  padding: 8px 0;
}

.skeleton-group {
  margin-bottom: 16px;
}

.skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f9f9f9;
}

.skeleton-title {
  height: 16px;
  width: 100px;
  background-color: #f2f2f2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-title::after,
.skeleton-count::after,
.skeleton-icon::after,
.skeleton-item-title::after,
.skeleton-item-desc::after,
.skeleton-tag::after,
.skeleton-path::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: skeleton-wave 1.6s linear 0.5s infinite;
}

.skeleton-count {
  height: 14px;
  width: 60px;
  background-color: #f2f2f2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-items {
  padding: 0 16px;
}

.skeleton-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.skeleton-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.skeleton-content {
  flex: 1;
  min-width: 0;
}

.skeleton-item-title {
  height: 16px;
  width: 70%;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-item-desc {
  height: 12px;
  width: 90%;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-item-meta {
  display: flex;
  align-items: center;
}

.skeleton-tag {
  height: 12px;
  width: 40px;
  background-color: #f2f2f2;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-path {
  height: 12px;
  width: 120px;
  background-color: #f2f2f2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style> 